import 'dart:math';
import 'package:flutter/material.dart';

class FlowDemo extends StatelessWidget {
  const FlowDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _buildSectionTitle('Basic Flow Layout'),
        _buildBasicFlow(),
        
        const SizedBox(height: 20),
        _buildSectionTitle('Circular Flow Layout'),
        _buildCircularFlow(),
        
        const SizedBox(height: 20),
        _buildSectionTitle('Diagonal Flow Layout'),
        _buildDiagonalFlow(),
      ],
    );
  }

  Widget _buildSectionTitle(String title) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: Text(
        title,
        style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
      ),
    );
  }

  Widget _buildBasicFlow() {
    return Container(
      height: 200,
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Flow(
        delegate: BasicFlowDelegate(margin: const EdgeInsets.all(10.0)),
        children: <Widget>[
          Container(width: 80.0, height: 80.0, color: Colors.red),
          Container(width: 80.0, height: 80.0, color: Colors.green),
          Container(width: 80.0, height: 80.0, color: Colors.blue),
          Container(width: 80.0, height: 80.0, color: Colors.yellow),
          Container(width: 80.0, height: 80.0, color: Colors.brown),
          Container(width: 80.0, height: 80.0, color: Colors.purple),
        ],
      ),
    );
  }

  Widget _buildCircularFlow() {
    return Container(
      height: 300,
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Flow(
        delegate: CircularFlowDelegate(),
        children: List.generate(8, (index) {
          return Container(
            width: 60,
            height: 60,
            decoration: BoxDecoration(
              color: Colors.primaries[index % Colors.primaries.length],
              shape: BoxShape.circle,
            ),
            child: Center(
              child: Text(
                (index + 1).toString(),
                style: const TextStyle(color: Colors.white, fontSize: 18),
              ),
            ),
          );
        }),
      ),
    );
  }

  Widget _buildDiagonalFlow() {
    return Container(
      height: 250,
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Flow(
        delegate: DiagonalFlowDelegate(),
        children: List.generate(6, (index) {
          return Container(
            width: 70 + index * 10,
            height: 50 + index * 5,
            color: Colors.accents[index % Colors.accents.length],
            child: Center(
              child: Text(
                'Item ${index + 1}',
                style: const TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
          );
        }),
      ),
    );
  }
}

class BasicFlowDelegate extends FlowDelegate {
  final EdgeInsets margin;

  BasicFlowDelegate({this.margin = EdgeInsets.zero});

  @override
  void paintChildren(FlowPaintingContext context) {
    var x = margin.left;
    var y = margin.top;
    
    for (int i = 0; i < context.childCount; i++) {
      var childSize = context.getChildSize(i)!;
      var w = x + childSize.width + margin.right;
      
      if (w < context.size.width) {
        context.paintChild(i, transform: Matrix4.translationValues(x, y, 0.0));
        x = w + margin.left;
      } else {
        x = margin.left;
        y += childSize.height + margin.top + margin.bottom;
        context.paintChild(i, transform: Matrix4.translationValues(x, y, 0.0));
        x += childSize.width + margin.left + margin.right;
      }
    }
  }

  @override
  Size getSize(BoxConstraints constraints) {
    return Size(constraints.maxWidth, 200);
  }

  @override
  bool shouldRepaint(covariant FlowDelegate oldDelegate) {
    return oldDelegate != this;
  }
}

class CircularFlowDelegate extends FlowDelegate {
  @override
  void paintChildren(FlowPaintingContext context) {
    final radius = context.size.width / 2;
    final center = Offset(context.size.width / 2, context.size.height / 2);
    
    for (int i = 0; i < context.childCount; i++) {
      final angle = 2 * i * 3.141592 / context.childCount;
      final x = center.dx + radius * 0.7 * cos(angle) - context.getChildSize(i)!.width / 2;
      final y = center.dy + radius * 0.7 * sin(angle) - context.getChildSize(i)!.height / 2;
      
      context.paintChild(i, transform: Matrix4.translationValues(x, y, 0.0));
    }
  }

  @override
  Size getSize(BoxConstraints constraints) {
    return Size(constraints.maxWidth, 300);
  }

  @override
  bool shouldRepaint(covariant FlowDelegate oldDelegate) => false;
}

class DiagonalFlowDelegate extends FlowDelegate {
  @override
  void paintChildren(FlowPaintingContext context) {
    for (int i = 0; i < context.childCount; i++) {
      final x = 20.0 * i;
      final y = 30.0 * i;
      context.paintChild(i, transform: Matrix4.translationValues(x, y, 0.0));
    }
  }

  @override
  Size getSize(BoxConstraints constraints) {
    return Size(constraints.maxWidth, 250);
  }

  @override
  bool shouldRepaint(covariant FlowDelegate oldDelegate) => false;
}